<template>
  <client-only>
    <div class="Page Confirm">
<div class="Title">
  <h1 class="fl f18">订单确认</h1>
  <!-- <img src="~/assets/img/cart_setp2.png" class="fr"> -->
  <div class="clear"></div>
</div>
<form name="flowForm" id="flowForm" method="post" action="">
  <table class="GoodList">
    <tbody>
    <tr>
      <th class="name">商品</th>
      <th class="price">原价</th>
      <th class="priceNew">价格</th>
    </tr>
    </tbody>
    <tbody>
   <tr>
      <td colspan="3" class="teacher">讲师：{{order.teacherName}}</td>
    </tr>
    <tr class="good">
      <td class="name First">
        <a target="_blank" :href="`/course/${order.courseId}`">
          <img :src="order.courseCover" :alt="order.courseTitle"></a>
        <div class="goodInfo">
          <input type="hidden" class="ids ids_14502" value="14502">
          <a target="_blank" :href="`/course/${order.courseId}`">{{order.courseTitle}}</a>
        </div>
      </td>
      <td class="price">
        <p>￥<strong>{{order.totalFee}}</strong></p>
      </td>
      <td class="red priceNew Last">￥<strong>{{order.totalFee}}</strong></td>
    </tr>
    <tr>
      <td class="Billing tr" colspan="3">
        <div class="tr">
          <p>共 <strong class="red">1</strong> 件商品，合计<span
            class="red f20">￥<strong>{{order.totalFee}}</strong></span></p>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
  <div class="Finish">
    <div class="fr" id="AgreeDiv">
      <el-checkbox v-model="agree">我已阅读并同意<a href="javascript:;">《厚溥云课堂购买协议》</a></el-checkbox>
    </div>
    <div class="clear"></div>
    <div class="Main fl">
      <div class="fl">
        <a :href="`/course/${order.courseId}`">返回课程详情页</a>
      </div>
      <div class="fr">
        <p>共 <strong class="red">1</strong> 件商品，合计<span class="red f20">￥<strong
          id="AllPrice">499</strong></span></p>
      </div>
    </div>
    <input name="score" value="0" type="hidden" id="usedScore">
    <el-button :disabled="!agree" type="danger" id="submitPay" @click="goPay">去支付</el-button>
    <div class="clear"></div>
  </div>
</form>
</div>
  </client-only>
</template>

<script>
import orderApi from '../../api/order';
export default{
    // asyncData({params,error}){
    //     console.log('cid:',params.cid);  
    //     return orderApi.showInfo(params.cid).then(res=>{
    //         console.log(res);
    //         return{
    //             order:res.data
    //         }
    //     })
    // },
    data(){
        return{
            order:{},//订单信息
            agree:true,//是否同意协议
        }
    },
    created(){
        this.initOrder()
    },
    methods:{
        initOrder(){
            orderApi.showInfo(this.$route.params.cid).then(res=>{
                this.order=res.data
            }) 
        },
        //去支付
        goPay(){
          //调用创建订单api
          orderApi.createOrder(this.$route.params.cid).then(res=>{
            //跳转到个人中心
            this.$router.push('/order/list')
          })
        }
    }
}
</script>